<script setup>
import { ref } from "vue"

// 文本框dom
const cateName = ref('')
const cateAlias = ref('')
// 判断是否点了提交
const isChildSubmit = ref(false)
const isChildShow = ref(false)

defineExpose({
  cateName,
  cateAlias
})

// 打开编辑后点击确认
const updateIsChildSubmit = () => {
  // 告诉父元素我点了确认
  isChildSubmit.value = true
  console.log('我点确认了')
  // 双向绑定，告诉父元素值变了
  emit('update:isSubmit', isChildSubmit.value)
}
// 点差取消
const updateIsChildShow = () => {
  isChildShow.value = true
  console.log('执行到我说明点取消了')
  emit('update:isShow', isChildShow.value)
  // console.log('在子组件is值是',isChildShow.value)
}

// 接受父元素v-model传下来的值
defineProps({
  isSubmit: Boolean,
  isShow: Boolean
})
// 定义要返回父元素的事件名称
const emit = defineEmits(['update:isSubmit','update:isShow']);
</script>

<template>
    <!-- 分类弹框 -->
    <div class="addFenLei">
      <div class="addFenLeiTop">
        <div>添加分类</div>
        <div class="cha" @click="updateIsChildShow">x</div>
      </div>
      <div class="addFenLeiInp">
        <div>分类名称</div>
        <input type="text" ref="cateName">
      </div>
      <div class="addFenLeiInp">
        <div>分类别名</div>
        <input type="text" ref="cateAlias">
      </div>
      <div class="addFenLeiFoot">
        <button class="quXiao minBtn" @click="updateIsChildShow">取消</button>
        <button class="queRen minBtn" @click="updateIsChildSubmit" ref="childSubmit">确认</button>
      </div>
    </div> 
</template>

<style scoped>
.addFenLei{
  width: 350px;
  height: 225px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: fixed;
  padding: 5px;
  background-color: rgb(136, 186, 239);
  border-radius: 10px;
}
.addFenLeiTop{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.addFenLeiTop div{
  margin: 0 5px;
  font-size: 20px;
  /* cursor: pointer; */
}
.addFenLei .cha {
  cursor: pointer;
}
.addFenLei .cha:hover{
  opacity: 0.5;
}
.addFenLeiInp{
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  line-height: 50px;
  font-size: 15px;
}
.addFenLeiInp input{
  display: block;
  margin-left: 5px;
  width: 200px;
  height: 20px;
  background-color: transparent;
}
.addFenLeiInp input:focus {
    outline: none; /* 移除默认的聚焦轮廓 */
    border-color: #74b4e9; /* 设置蓝色边框 */
    transition: all 0.3s ease; /* 添加过渡动画 */
  }
.addFenLeiFoot{
  width: 100%;
  height: 50px;
  display: flex;
  /* display: block; */
  align-items: center;
  justify-content: center;
  /* text-align: center; */
}
.addFenLeiFoot .quXiao,.addFenLeiFoot .queRen{
  width: 45px;
  height: 35px;
  font-size: 12px;
  line-height: 35px;
  margin: 5px;
  color: black;
}
.addFenLeiFoot .quXiao {
  background-color: rgb(199, 205, 205);
}
.addFenLeiFoot .quXiao:hover{
  background-color: rgb(199, 205, 205, 0.8);
}
</style>